<template>
  <div>
    <el-row class="button">
      <div class="explain">{{ $t("table.say") }}</div>
      <el-button @click="exportExcel" size="small" type="primary">{{
        $t("table." + "Excel-Export")
      }}</el-button>
      <el-button
        size="small"
        icon="el-icon-edit"
        type="success"
        @click="jumpernew"
        >{{ $t("table.AddTestQuestions") }}</el-button
      >
    </el-row>
    <!-- form表单：共12个表单域  -->
    <el-form
    label-width="100px"
      :model="formInline"
      ref="fromDate"
      :inline="true"
    >
      <el-row>
        <!-- 1.学科 -->
        <el-col :span="6">
          <el-form-item
            :label="$t('route.' + 'subjects-list')"
            prop="subjectID"
          >
            <el-select
              size="small"
              v-model="formInline.subjectID"
              placeholder="请选择"
              @change="subjectValue"
              style="width: 100%"
            >
              <el-option
                v-for="item in subjectArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 2.二级目录 -->
        <el-col :span="6">
          <el-form-item
            :label="$t('table.SecondaryDirectory')"
            prop="catalogID"
          >
            <el-select
              size="small"
              v-model="formInline.catalogID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.directoryName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 3.标签 -->
        <el-col :span="6">
          <el-form-item :label="$t('route.' + 'subjects-tags')" prop="tags">
            <el-select
              size="small"
              v-model="formInline.tags"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.tagName"
                >{{ item.tagName }}</el-option
              >
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 4.关键字 -->
        <el-col :span="6">
          <el-form-item :label="$t('table.keyword')" prop="keyword">
            <el-input
              size="small"
              v-model="formInline.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 5.试题类型-->
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('table.QuestionType')" prop="questionType">
            <el-select
              size="small"
              v-model="formInline.questionType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in questionType"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 6.难度 -->
        <el-col :span="6">
          <el-form-item :label="$t('table.difficulty')" prop="difficulty">
            <el-select
              size="small"
              v-model="formInline.difficulty"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 7.方向 -->
        <el-col :span="6">
          <el-form-item :label="$t('table.Directions')" prop="direction">
            <el-select
              size="small"
              v-model="formInline.direction"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 8.录入人 -->
        <el-col :span="6">
          <el-form-item :label="$t('table.EnteredBy')" prop="creatorID">
            <el-select
              size="small"
              v-model="formInline.creatorID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 9.题目备注 -->
        <el-col :span="6">
          <el-form-item :label="$t('table.TopicRemarks')" prop="remarks">
            <el-input size="small" v-model="formInline.remarks"></el-input>
          </el-form-item>
        </el-col>
        <!-- 10.企业简称 -->
        <el-col :span="6">
          <el-form-item :label="$t('table.Enterprise')" prop="shortName">
            <el-input size="small" v-model="formInline.shortName"></el-input>
          </el-form-item>
        </el-col>
        <!-- 11.城市 -->
        <el-col :span="6">
          <el-form-item :label="$t('table.city')" prop="province">
            <el-row :gutter="10">
              <!-- 省 -->
              <el-col :span="12">
                <el-select
                  size="small"
                  v-model="formInline.provinces"
                  @change="getCitys(formInline.provinces)"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
              <!-- 市 -->
              <el-col :span="12">
                <el-select
                  size="small"
                  v-model="formInline.citys"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <!-- 12.清除、搜索 -->
        <el-col :span="6">
          <el-form-item style="float: right">
            <el-button size="small" @click="resetForm">{{
              $t("table.eliminate")
            }}</el-button>
            <el-button size="small" type="primary" @click="search">{{
              $t("table.search")
            }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 精选数据列表
import { choice as questionChoice } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { list as directorysApi } from '@/api/hmmm/directorys'
import { list as tagsApi } from '@/api/hmmm/tags'
import { direction, difficulty, questionType } from '@/api/hmmm/constants'
// 用户
import { list as userList } from '@/api/base/users'
// 城市地区
import { provinces, citys } from '@/api/hmmm/citys'
// excel导出
import { handleDownload } from '@/utils/excelExport'
// 导入dayjs
// import dayjs from 'dayjs'
export default {
  // props: {
  //   counts: {
  //     type: Number,
  //     default: null
  //   }
  // },
  data () {
    return {
      formInline: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        direction: null, // 方向
        difficulty: null, // 难度
        questionType: null, // 试题类型
        creatorID: null, // 录入人
        keyword: null, // 关键字
        remarks: null, // 题目备注
        provinces: null, // 城市
        citys: null, // 地区
        shortName: null // 企业简称
      },
      subjectArr: [], // 学科简单列表
      catalogList: [], // 目录
      tagsList: [], // 标签
      userList: [], // 录入人
      direction: direction, // 方向
      difficulty: difficulty, // 难度
      questionType: questionType, // 试题类型
      provinces: provinces(), // 城市的枚举值
      citys: [] // 地区
    }
  },
  created () {
    this.subjectList() // 调用学科的接口
    // 录入人
    this.getUserList()
  },
  methods: {
    // excel导出
    async exportExcel () {
      const {
        data: { items }
      } = await questionChoice({ page: 1, pagesize: 9999 })
      // 第二步：定义导出表格的表头
      const headersArr = [
        '学科',
        '目录',
        '企业',
        '城市',
        '方向',
        '题型',
        '难度',
        '题干',
        '解析视频',
        '答案解析',
        '题目备注',
        '试题标签'
        // '时间'
      ]
      // 第三步：定义需要替换的中英文
      const headersRelations = {
        学科: 'subject',
        目录: 'catalog',
        企业: 'enterprise',
        城市: 'city',
        方向: 'direction',
        题型: 'questionType',
        难度: 'difficulty',
        题干: 'question',
        解析视频: 'videoURL',
        答案解析: 'answer',
        题目备注: 'remarks',
        试题标签: 'tags'
        // 试题录入时间: 'addDate'
      }
      // 获取数据的属性值
      // const englishkeys = Object.values(headersRelations)
      // console.log(englishkeys)
      // 处理数据
      const dealfn = (value, englishkey) => {
        // if (englishkey === 'addDate') {
        //   value = dayjs(value).format('YYYY-MM-DD HH:mm:ss')
        // }
        if (englishkey === 'questionType') {
          const res = questionType.find((item) => item.value === value)
          return res ? res.label : '未知'
        } else if (englishkey === 'difficulty') {
          const res = difficulty.find((item) => item.value === value)
          return res ? res.label : '未知'
        } else if (englishkey === 'question' || englishkey === 'answer') {
          const reg = new RegExp('<|p|>|span|/|a', 'g')
          const res = value.replace(reg, '')
          return res
        }
        // function processing (data, constants) {
        //   if ([data].includes(englishkey)) {
        //     const fn = (value) => {
        //       if (Number(value)) {
        //         const res = constants.find((item) => item.value === value)
        //         return res ? res.label : '未知'
        //       } else {
        //         const reg = new RegExp('<|p|>|span|/|a', 'g')
        //         const res = value.replace(reg, '')
        //         return res
        //       }
        //     }
        //     value = fn(value)
        //   }
        // }
        // processing('questionType', questionType)
        // processing('difficulty', difficulty)
        // processing('question')
        // processing('answer')
        return value
      }
      // 调用封装的excel导出的函数  5个参数  前3个必须,后两个可选
      handleDownload(
        items,
        headersArr,
        headersRelations,
        '精选题库表格',
        dealfn
      )
    },
    async subjectList () {
      const { data } = await simple({ page: 1, pagesize: 9999 })
      // console.log(data)
      this.subjectArr = data
    },
    // 目录+标签数据接口调用
    async directorysList () {
      const {
        data: { items }
      } = await directorysApi({ subjectID: this.formInline.subjectID })
      this.catalogList = items
      const {
        data: { items: tags }
      } = await tagsApi({ subjectID: this.formInline.subjectID })
      console.log(tags)
      this.tagsList = tags
    },
    // 学科里面有值改变的时候
    subjectValue () {
      this.formInline.catalogID = ''
      this.formInline.tags = ''
      this.directorysList() // 目录+标签
    },
    // 录入人
    async getUserList () {
      const {
        data: { list }
      } = await userList()
      this.userList = list
      // console.log(list)
    },
    // 跳转
    jumpernew () {
      this.$router.push('/questions/new')
    },
    // 城市地区的处理
    getCitys (val) {
      this.formInline.citys = ''
      this.citys = citys(val)
    },
    // 向父组件传值
    search () {
      console.log(this.formInline)
      this.$emit('searchValue', this.formInline)
    },
    // 清除数据
    resetForm () {
      this.$refs.fromDate.resetFields()
      this.$emit('clear')
      this.formInline = {
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: null, // 标签
        direction: null, // 方向
        difficulty: null, // 难度
        questionType: null, // 试题类型
        creatorID: null, // 录入人
        keyword: null, // 关键字
        remarks: null, // 题目备注
        provinces: null, // 城市
        citys: null // 地区
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.explain {
  float: left;
  font-size: 12px;
  color: pink;
  flex: 1;
}
.button {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  // float: right;
  margin-bottom: 20px;
}
.el-form {
  .el-form-item {
    // box-shadow: 0px 2px 5px rgb(20, 20, 20);
    // margin-left: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
::v-deep .el-form-item__content {
  width: 100% !important;
}
</style>
